<!DOCTYPE HTML>

<html lang="en-GB">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta name="author" content="The CSS Ninja">
	<meta name="keywords" content="Css, CSS Ninja, The CSS Ninja, Javascript, Web, html, html5, browsers, javascript, cascading style sheets">
	<meta name="description" content="The CSS Ninja is a collection of thoughts, tutorials and ramblings of CSS Ninja in the web development business">
	<meta name="robots" content="all">
	<meta name="copyright" content="The CSS Ninja">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
	
	<title>Playing with the clipboard in iOS safari | The CSS Ninja</title>

</head>
<body>
	
	<div class="container">
	    <div contenteditable="true">
		    <header>
	            <hgroup>
	                <h1>Heading 1 (in hgroup)</h1>
	                <h2>Heading 2 (in hgroup)</h2>

	            </hgroup>
	            <nav>
	                <ul>
	                    <li><a href="#">navigation item #1</a></li>
	                    <li><a href="#">navigation item #2</a></li>
	                    <li><a href="#">navigation item #3</a></li>
	                </ul>

	            </nav>
	        </header>

	        <h1>Text-level semantics</h1>

	        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
	        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
        </div>
        <button id="getsr">Get selection range</button> <button id="setsr">Set selection range</button>
        <button id="bold">Bold</button> <button id="underline">Underline</button>
	</div>
	
	<script>
		var $;

		(function(window, document){
			// Super tiny selector engine
			$ = function(selector,context){return(context||document).querySelectorAll(selector)};

			var getSR = $("#getsr")[0],
				setSR = $("#setsr")[0],
				underline = $("#underline")[0],
				bold = $("#bold")[0];

			// Basic clipboard events
			
			// iOS5 Safari Doesn't seem to trigger the before events
			document.addEventListener("beforecopy",  clipboard, false);
			document.addEventListener("beforecut",   clipboard, false);
			document.addEventListener("beforepaste", clipboard, false);

			document.addEventListener("copy",  clipboard, false);
			document.addEventListener("cut",   clipboard, false);
			document.addEventListener("paste", clipboard, false);

			function clipboard(e) {
			    var range = window.getSelection();

			    alert(e.type + ": " + range.toString());

			    clipboadData(e);
			}

			// Selection ranges
			getSR.addEventListener("click", ranges, false);
			setSR.addEventListener("click", function(e) { ranges(e, { start: $("h1")[0].firstChild, startOffset: 5, end: $("p")[2].firstChild, endOffset: 50 }) }, false);

			function ranges(e, opts) {
				var sel = window.getSelection(),
					range;

				if(opts) {
					// Set range
					range = document.createRange();
					
					range.setStart(opts.start, opts.startOffset);
					range.setEnd(opts.end, opts.endOffset);
					sel.removeAllRanges();
					sel.addRange(range);

					console.log("The contents of the range just set: " + sel.toString());
				} else {
					// Get range
					range = sel.toString();
					if(range != "") {
						alert(sel.toString());
					} else {
						alert("No range selection found");
					}
				}
			}

			// Setting clipboard data
			//getCB.addEventListener("click", clipboadData, false);
			//setCB.addEventListener("click", clipboadData, false);

			function clipboadData(e) {
				if("clipboardData" in e && e.type === "paste") {
					// No clipboard data on event then don't proceed
					alert("Clipboard data: " + e.clipboardData.getData('text/plain'));
				} else if("clipboardData" in e && e.type === "copy") {
					console.log("Setting clipboard data");
					e.clipboardData.setData('text','blah blah, purple monkey dishwasher');
				}
			}

			// This won't show the iOS highlight until you bring focus to the contenteditable element and don't dimiss the keyboard.
			// Keeping focus and not dimissing the keyboard will then show the highlight when you refresh the page.
			ranges("", { start: $("h1")[0].firstChild, startOffset: 5, end: $("h1")[0].firstChild, endOffset: 15 });

			// WYSIWYG stuff
			function cmd(cmd, ui, val) {
				document.execCommand(cmd, ui, val);
			}

			bold.addEventListener("click",function(){ cmd("bold",false); },false);
			underline.addEventListener("click",function(){ cmd("underline",false); },false);

		})(this, document)
	</script>
	<!-- Google analytics 
	<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
		var pageTracker = _gat._getTracker("UA-4638292-1");
		pageTracker._initData();
		pageTracker._trackPageview();
	</script>-->
	
</body>
</html>
